<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title></title>
  <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" >
  <style type="text/css">
         body{font-family:tahoma; color:black; font-size:14px;}
         .classeinput {font-family:verdana; color:red; font-size:14px;}
  </style>
  <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
  <script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js" type="text/javascript"></script>
  
</head>
<body>

<script id="summaryTemplate" type="text/x-jquery-tmpl">
 ${formTitle}
 <form id="${formID}" name="${formName}" method="${formMethod}" style="${formCss}" class="${formAddClass}" action="${formAction}" {{each(index,evento) formEvents}} ${index}="${evento}" {{/each}}>
  {{each formInputs}}
    {{if inputLabel}}
    <label for="${inputID}" class="${inputLabel.lblAddClass}" style="${inputLabel.lblCss}">${inputLabel.lblText}</label>
    {{/if}}

    {{if inputType == "text" || inputType == "submit"}}
    <input id="${inputID}" name="${inputName}" type="${inputType}" style="${inputCss}" class="${inputAddClass}" value="${inputValue}" />
    {{/if}}
    
    {{if inputType == "textarea"}}
    <textarea id="${inputID}" name="${inputName}" style="${inputCss}" class="${inputAddClass}">${inputValue}</textarea>
    {{/if}}
    
  {{/each}}
 </form>
 <BR>
</script>

<h3>Meu Form template</h3>
<div id="formContent"></div>
</body>
<script>
var formSimples = [{
  formID : "form",
  formName : "form",
  formTitle : "formulario simples",
  formMethod :"post",
  formAction :"index.php",
  formCss : "",
  formAddClass : "",
  formEvents : {
                onsubmit: "return false"
               },
  formInputs:[
              {
               inputID : "inputid",
               inputName : "inputname",
               inputType : "text",
               inputCss : "",
               inputAddClass : "",
               inputLabel : {
                             lblText : "Input",
                             lblCss : "",
                             lblAddClass : ""
                            }
             }
            ]//formInputs
}];

var formSimplesMaisInputs = [{
  formID : "form",
  formName : "form",
  formTitle : "formulario simples com mais inputs (no css)",
  formMethod :"post",
  formAction :"index.php",
  formCss : "",
  formAddClass : "",
  formEvents : {
                onsubmit: "return false"
               },
  formInputs:[
              {
               inputID : "inputid", inputName : "inputname", inputType : "text", inputCss : "", inputAddClass : "",
               inputLabel : {
                             lblText : "Input",
                             lblCss : "",
                             lblAddClass : ""
                            }
             },
             {
               inputID : "inputid2", inputName : "inputname2", inputType : "text", inputCss : "", inputAddClass : "",
               inputLabel : {
                             lblText : "Input2",
                             lblCss : "",
                             lblAddClass : ""
                            }
             },
             {
               inputID : "inputid3", inputName : "inputname3", inputType : "text", inputCss : "", inputAddClass : "",
               inputLabel : {
                             lblText : "Input3",
                             lblCss : "",
                             lblAddClass : ""
                            }
             }
            ]//formInputs
}];

var formSimplesComCss = [{
  formID : "form",
  formName : "form",
  formTitle : "formulario simples com css",
  formMethod :"post",
  formAction :"index.php",
  formCss : "padding:10px; border:1px solid #c0c0c0; background:#333; color:white;",
  formAddClass : "",
  formEvents : {
                onsubmit: "return false"
               },
  formInputs:[
              {
               inputID : "inputid",
               inputName : "inputname",
               inputType : "text",
               inputCss : "",
               inputAddClass : "",
               inputLabel : {
                             lblText : "Input",
                             lblCss : "",
                             lblAddClass : ""
                            }
             }
            ]//formInputs
}];

var formCompletoComCss = [{
  formID : "form",
  formName : "form",
  formTitle : "formulario completo com css",
  formMethod :"post",
  formAction :"index.php",
  formCss : "padding:10px; border:1px solid #c0c0c0; background:#333; color:white;",
  formAddClass : "",
  formEvents : {
                onsubmit: "return false"
               },
  formInputs:[
              {
               inputID : "nome", inputName : "nome", inputType : "text", inputCss : "", inputAddClass : "",
               inputLabel : {
                             lblText : "Nome:",
                             lblCss : "display:block",
                             lblAddClass : ""
                            }
             },
             {
               inputID : "email", inputName : "email", inputType : "text", inputCss : "", inputAddClass : "",
               inputLabel : {
                             lblText : "Email:",
                             lblCss : "display:block; padding-top:10px;",
                             lblAddClass : ""
                            }
             }
             ,
             {
               inputID : "assunto", inputName : "assunto", inputType : "text", inputCss : "", inputAddClass : "",
               inputLabel : {
                             lblText : "Assunto:",
                             lblCss : "display:block; padding-top:10px;",
                             lblAddClass : ""
                            }
             },
             {
               inputID : "texto", inputName : "texto", inputType : "textarea", inputCss : "width:300px; font-family:tahoma; font-size:12px;", inputAddClass : "classeinput",
               inputLabel : {
                             lblText : "Texto:",
                             lblCss : "display:block; padding-top:10px;",
                             lblAddClass : ""
                            }
             },
             {
               inputID : "enviarEmail", inputName : "enviarEmail", inputType : "submit", inputCss : "display:block; margin-top:10px;", inputAddClass : "", inputValue : "Enviar Email"
             }
            ]//formInputs
}];

/* Render the summaryTemplate with the "movies" data */
$( "#summaryTemplate" ).tmpl( formSimples ).appendTo( "#formContent" );
$( "#summaryTemplate" ).tmpl( formSimplesMaisInputs ).appendTo( "#formContent" );
$( "#summaryTemplate" ).tmpl( formSimplesComCss ).appendTo( "#formContent" );
$( "#summaryTemplate" ).tmpl( formCompletoComCss ).appendTo( "#formContent" );

</script>
</html>
